<template>
  <div>
    <van-row>
      <van-col span="2"><van-icon @click="back" name="arrow-left" /></van-col>
      <van-col span="22">
        <van-search v-model="searchValue" show-action @click="enter" placeholder="请输入搜索关键词" >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </van-col>
    </van-row>
    <!-- 遮罩层 -->
    <van-overlay :show="show">
      <div class="header">
        <van-icon name="arrow-left" @click="search" />
        <div class="search">
          <van-search
            id="searShow"
            ref="getFocus"
            v-model="value"
            shape="round"
            background="#eeeeee"
            placeholder="请输入搜索关键词"
            @input="input"
          />
        </div>
        <span class="lef">搜索</span>
      </div>
      <div class="cont">
        <div v-show="searFlag">
          <van-cell v-for="(item, index) of searchList" :key="index" :value="item.brand" @click="proClick(index)" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, icon, Col, Row } from 'vant'
import { getSearchData } from '@/api/home.js'
// , categorybrandprolist

Vue.use(Search)
Vue.use(icon)
Vue.use(Col)
Vue.use(Row)
export default {
  data () {
    return {
      searchValue: '',
      value: '',
      show: false,
      searchList: [],
      hotList: []
    }
  },
  computed: {
    searFlag () {
      if (this.searchList.length === 0) return false
      else return true
    }
  },
  props: {
    backNum: {
      type: Number,
      default: -1
    }
  },
  methods: {
    back () {
      console.log(this.backNum)
      this.$router.go(this.backNum)
    },
    onSearch () {
      console.log(11)
    },
    enter () {
      this.show = true
    },
    async input () {
      var params = {
        category: this.value
      }
      this.searchList = await getSearchData(params)
    },
    search () {
      var inp = document.querySelector('#searShow')
      setTimeout(() => {
        inp.focus()
      }, 1000)
      this.show = !this.show
      this.value = ''
      this.searchList = []
    },
    proClick (index) {
      this.$router.push({ path: '/list', query: { brand: this.searchList[index].brand, category: this.value } })
      this.show = false
      this.value = ''
      this.searchList = []
    }
  }
}
</script>

<style lang='stylus' scoped>
.van-row .van-col
  text-align center
  height 54px
  line-height 54px
.header
  background-color #eeeeee !important
  color black
  height 2rem
  display flex
  justify-content space-between
  .search
    width 80%
    .van-search
      height 2rem
  span
    line-height 2rem
    text-align right
    width 10%
  .lef
    text-align left
  .van-icon
    font-size 26px
    padding .3rem 0 0 .5rem
.cont
  width 100%
  height 100%
  background-color #fff
  .van-cell div
    // height 2rem
    width 95%
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
.van-overlay
  z-index 111
  .van-row div
    padding 2px 10px
    font-size 10px
    margin-top 10px
    text-align center
    background-color #eee
    border-radius 12px
  h5
    padding-top 10px
    font-size 20px
    font-weight 400
    margin-left .8rem
    height 1.6rem
    line-height 1.6rem
</style>
